<template>
    <div class="carousel-wrapper" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <div class="carousel-container" :style="carouselStyle" ref="carouselContainer">
        <div v-for="(img, index) in images" :key="index" class="carousel-slide">
          <img :src="img" alt="">
        </div>
      </div>
  
      <!-- 左箭头 -->
      <div class="carousel-arrow left-arrow" @click="moveToPreviousSlide">&#10094;</div>
      <!-- 右箭头 -->
      <div class="carousel-arrow right-arrow" @click="moveToNextSlide">&#10095;</div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const images = [
//   https://res.jsvry.cn/prod/system/2024/08/07/1945089rwb3tv.jpg
    'https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/bgaajjj.jpg',
    'https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/bgaajjj.jpg',
    'https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/bgaajjj.jpg'
  ];
  
  const currentIndex = ref(0);
  const startX = ref(0); // 记录触摸开始时的X坐标
  const carouselStyle = ref({
    transform: 'translateX(0)', // 控制轮播位置
    transition: 'transform 0.5s ease-in-out',
  });
  
  // 移动到下一张
  const moveToNextSlide = () => {
    if (currentIndex.value === images.length - 1) {
      currentIndex.value = 0;
    } else {
      currentIndex.value++;
    }
    updateCarouselPosition();
  };
  
  // 移动到上一张
  const moveToPreviousSlide = () => {
    if (currentIndex.value === 0) {
      currentIndex.value = images.length - 1;
    } else {
      currentIndex.value--;
    }
    updateCarouselPosition();
  };
  
  // 更新轮播位置
  const updateCarouselPosition = () => {
    carouselStyle.value.transform = `translateX(-${currentIndex.value * 100}%)`;
  };
  
  // 处理触摸开始
  const onTouchStart = (e) => {
    startX.value = e.touches[0].clientX;
  };
  
  // 处理触摸移动
  const onTouchMove = (e) => {
    const moveX = e.touches[0].clientX - startX.value;
    const carouselContainer = e.target.closest('.carousel-container');
    carouselContainer.style.transition = 'none'; // 禁止移动时的过渡效果
    carouselContainer.style.transform = `translateX(${(currentIndex.value * -100) + (moveX / window.innerWidth) * 100}%)`;
  };
  
  // 处理触摸结束
  const onTouchEnd = (e) => {
    const endX = e.changedTouches[0].clientX;
    if (startX.value - endX > 50) {
      moveToNextSlide(); // 向右滑动，切换到下一张
    } else if (endX - startX.value > 50) {
      moveToPreviousSlide(); // 向左滑动，切换到上一张
    }
  };
  </script>
  
  <style scoped>
  .carousel-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 650px;
  }
  
  .carousel-slide img {
    width: 100%;
    height: 650px;
    object-fit: cover;
  }
  
  /* 箭头样式 */
  .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem;
    cursor: pointer;
    z-index: 10;
  }
  
  .left-arrow {
    left: 10px;
  }
  
  .right-arrow {
    right: 10px;
  }
  </style>